<template>
  <div :spinning="confirmLoading">
    <a-spin tip="验证码发送中，请稍等..." :spinning="spinning">
      <p v-show="ytjShow"><B style="font-size: larger;">{{ystypestr}} </B></p>
      <!--<p v-show="ytjShow"><B style="font-size: larger;">{{ysdh}}</B></p>-->
      <a-page-header style="border: 1px solid;" title="任务基本信息2">
        <p><B style="font-size: larger; color: red;">提示:结算金额清空或填写0,则当前人员不执行结算!</B></p>
        <j-vxe-table
          ref="vTable"
          row-number
          keep-source
          :height="280"
          :loading="loading"
          :dataSource="dataSource"
          :columns="columns"
          style="margin-top: 8px;"
        >
        </j-vxe-table>
      </a-page-header>
      <a-page-header style="border: 1px solid; margin-top: 10px; " title="项目基本信息">
        <a-card :bordered="false" style="background-color: #fff;">
          <a-descriptions size="small" :column="4">
            <a-descriptions-item label="发起时间"> {{fbsj}} </a-descriptions-item>
            <a-descriptions-item label="项目编号"> {{xmbh}} </a-descriptions-item>
            <a-descriptions-item label="工作城市"> {{gzcsmc}} </a-descriptions-item>
            <!--<a-descriptions-item label="任务总金额">{{rwzje}} </a-descriptions-item>-->
            <a-descriptions-item label="单人结算金额">{{drjsje}} </a-descriptions-item>
            <a-descriptions-item label="项目名称">{{xmmc}} </a-descriptions-item>
            <a-descriptions-item label="年龄要求">{{nlyq}} </a-descriptions-item>
            <a-descriptions-item label="学历要求">{{xlyq}} </a-descriptions-item>
            <a-descriptions-item label="经验要求">{{jyyq}} </a-descriptions-item>
            <a-descriptions-item label="项目类型">{{xmlx}} </a-descriptions-item>
            <a-descriptions-item label="需要人数">{{xyrs}} </a-descriptions-item>
            <a-descriptions-item label="项目协议编号"> {{xmxybh}}</a-descriptions-item>
          </a-descriptions>
          <a-descriptions size="small" :column="2">
            <a-descriptions-item label="项目起止时间">{{xmqrq}} -- {{xmzrq}} </a-descriptions-item>
            <a-descriptions-item label="工作时间">{{gzkssj}} -- {{gzjssj}} </a-descriptions-item>
          </a-descriptions>
          <a-descriptions size="small" :column="1">
            <a-descriptions-item label="项目内容"> {{xmnr}} </a-descriptions-item>
          </a-descriptions>
          <a-descriptions size="small" :column="1">
            <a-descriptions-item label="验收标准"> {{ysbz}} </a-descriptions-item>
          </a-descriptions>
        </a-card>
      </a-page-header>
      <a-page-header title="任务进展详细情况的资料" v-show="dtjShow">
        <j-upload-view v-model="cjzfiles" disabled> </j-upload-view>
      </a-page-header>
      <a-page-header style="border: 1px solid; margin-top: 10px; "  v-show="ytjShow" >
        <!--<a-list :grid="{ gutter: 18, column: 4 }" :data-source="ysData">-->
        <!--  <a-list-item align="center" style="width: 15%;">-->
        <!--    <a-card title="验收内容分类">-->
        <!--      <div style="height: 29px; line-height:29px;">功能概述</div>-->
        <!--    </a-card>-->
        <!--  </a-list-item>-->
        <!--  <a-list-item align="center" style="width: 20%">-->
        <!--    <a-card title="项目承揽人">-->
        <!--      <div style="height: 29px; line-height:29px;">{{name}}</div>-->
        <!--    </a-card>-->
        <!--  </a-list-item>-->
        <!--  <a-list-item style="width: 40%">-->
        <!--    <a-card title="项目进展概况" align="center" :body-style="{ padding: '5px 24px' }">-->
        <!--      <p align="left" style="margin-bottom: 2px;">项目单号： {{itembh}} </p>-->
        <!--      <p align="left" style="margin-bottom: 2px;">项目名称： {{xmmc}}</p>-->
        <!--      <p align="left" style="margin: 0px;">当前已完结，提请验收</p>-->
        <!--    </a-card>-->
        <!--  </a-list-item>-->
        <!--  <a-list-item align="center" style="width: 25%">-->
        <!--    <a-card title="项目结算金额(元)">-->
        <!--      <div v-show="fkjeShow" @click="changeJsje" style="height: 29px; line-height:29px;">{{fkje}}</div>-->
        <!--      <div v-show="fkjeInputShow" style="height: 29px;"><a-input-number v-model="fkjeInput" :precision="2" :min="0.01" @blur="changeFkje" style="width: 60%"></a-input-number></div>-->
        <!--    </a-card>-->
        <!--  </a-list-item>-->
        <!--</a-list>-->
        需要说明情况 ：
        <a-list item-layout="horizontal" :data-source="checksData">
          <a-list-item slot="renderItem" slot-scope="item, index">
            <table>
             <tr>
               <td width="80px;" align="right">{{ item.rolename }} ：</td>
               <td>{{ item.createTime }} </td>
             </tr>
              <tr>
                <td></td>
                <td v-if="item.reason != null && item.reason != ''">{{item.reason}} </td>
                <td v-if="item.reason == null || item.reason == ''"> 无 </td>
              </tr>
              <!--<tr v-if="item.files != null && item.files != ''">-->
              <!--  <td></td>-->
              <!--  <td>展示任务进展详细情况的资料，视频、图片、文档等<br><j-upload-view v-model="item.files" disabled > </j-upload-view></td>-->
              <!--</tr>-->
              <tr v-if="item.rolename == '灵工人员'">
                <td></td>
                <td>
                  <a-upload action="#" list-type="picture-card" :file-list="[{uid:-1,status: 'done', url:item.qm }]" @preview="handlePreview" disabled ></a-upload></td>
              </tr>
            </table>
          </a-list-item>
        </a-list>
        <a-list item-layout="horizontal" v-show="ysshShow">
          <a-divider style="margin-bottom: 32px"/>
          <a-list-item>
            <a-form :form="form">
              <a-form-item>
                <table style="width: 1300px;">
                  <tr>
                    <td width="80px;" align="right">发包企业 ：</td>
                    <td>
                      <a-radio-group v-decorator="['result', { initialValue:'1' } ]" >
                        <a-radio value="1"> 通过验收 </a-radio>
                        <!--<a-radio value="2"> 拒绝通过 </a-radio>-->
                      </a-radio-group>
                    </td>
                  </tr>
                  <tr>
                    <td></td>
                    <td>
                      <a-textarea v-decorator="['reason']" placeholder="情况说明（一千字以内）" style="width: 80%;" :row="3"></a-textarea>
                    </td>
                  </tr>
                  <!--<tr>-->
                  <!--  <td></td>-->
                  <!--  <td>-->
                  <!--    展示任务进展详细情况的资料，视频、图片、文档等-->
                  <!--    <j-upload v-decorator="['files']" :trigger-change="true"></j-upload>-->
                  <!--  </td>-->
                  <!--</tr>-->
                </table>
              </a-form-item>
            </a-form>
          </a-list-item>
        </a-list>
      </a-page-header>
    </a-spin>
    <a-modal
      title="请查收验证码，该验证码用于在验收单上生成企业电子印章。"
      :visible="visibleYzm"
      @ok="checkAndDownload"
      @cancel="yzmClose"
      :confirm-loading="qsspinning"
    >
      <a-spin tip="签署中，请稍等..." :spinning="qsspinning">
        <a-form-item label="请输入验证码" :labelCol="{ xs: { span: 23 }, sm: { span: 6 }}" :wrapperCol="{ xs: { span: 24 }, sm: { span: 16 }}">
          <a-input  v-model="smscode"/>
        </a-form-item>
      </a-spin>
    </a-modal>
    <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
      <img alt="example" style="width: 100%" :src="previewImage" />
    </a-modal>
  </div>
</template>

<script>

  import { httpAction, getAction, postAction } from '@/api/manage'
  import pick from 'lodash.pick'
  import JFormContainer from '@/components/jeecg/JFormContainer'
  import JUpload from '@/components/jeecg/JUpload'
  import JUploadView from '@/components/jeecg/JUploadView'
  import JAreaLinkage from '@/components/jeecg/JAreaLinkage'
  import JImageUpload from '@/components/jeecg/JImageUpload'
  // import {JVXETypes} from "@comp/jeecg/JVxeTable";
  import {JVXETypes } from '@/components/jeecg/JVxeTable'
  import {pushIfNotExist, randomNumber, randomUUID} from "@/utils/util";

  let recordBean;
  export default {
    name: 'CusYsProjectForm',
    components: {
      JImageUpload,
      JUpload,
      JFormContainer,
      JUploadView,
      JAreaLinkage,
    },
    props: {
      //流程表单data
      formData: {
        type: Object,
        default: ()=>{},
        required: false
      },
      //表单模式：true流程表单 false普通表单
      formBpm: {
        type: Boolean,
        default: false,
        required: false
      },
      //表单禁用
      disabled: {
        type: Boolean,
        default: false,
        required: false
      }
    },
    data () {
      return {
        ysData: [
        {
          title: 'Title 1',
        },
        {
          title: 'Title 2',
        },
        {
          title: 'Title 3',
        },
        {
          title: 'Title 4',
        },
      ],
        form: this.$form.createForm(this),
        confirmLoading: false,
        previewVisible: false,
        previewImage: '',
        loading: false,
        dtjShow: false,
        ytjShow: false,
        ysshShow: false,
        visibleYzm: false,
        spinning: false,
        qsspinning: false,
        smscode: '',
        fkjeShow: true,
        fkjeInputShow: false,
        fkjeInput: '',
        model: {},
        labelCol: {
          xs: { span: 24 },
          sm: { span: 4 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 19 },
        },
        validatorRules: {
        },
        url: {
          add: "/project/lhygProjectItemChecks/add",
          addPl: "/project/lhygProjectItemChecks/addPl",
          edit: "/project/lhygProjectItemChecks/edit",
          queryById: "/project/lhygProject/queryById",
          getChecks: "/project/lhygProjectItemChecks/listNoPage",
          createPdf: "/project/lhygProjectIndividual/createPdf",
          checkAndDownload: "/project/lhygProjectIndividual/checkAndDownload",
          getPlYsMxList: "/project/lhygProjectIndividual/getPlYsMxList",
        },
        dataSource: [],
        columns: [
          {
            title: '结算金额(元)',
            align:"right",
            key: 'fkje',
            type: JVXETypes.inputNumber,
            width: '180px'
          },
          {
            title:'项目单号',
            align:"center",
            key: 'itembh',
            width: 200
          },
          {
            title:'姓名',
            align:"center",
            key: 'name',
            width: 130
          },
          {
            title:'身份证号',
            align:"center",
            key: 'identityid',
            width: 190
          },
          {
            title:'手机号',
            align:"center",
            key: 'phone',
            width: 130
          },
          // {
          //   title:'任务金额',
          //   align:"center",
          //   key: 'rwje',
          //   width: 150
          // },
          {
            title:'提交验收时间',
            align:"center",
            key: 'wctime',
            width: 200
          },
        ],
        fbsj: '',
        xmbh: '',
        xmxybh: '',
        gzcsmc: '',
        xmmc: '',
        xmlx: '',
        xyrs: '',
        rwzje: '',
        drjsje:'',
        nlyq: '',
        xlyq: '',
        jyyq: '',
        xmqrq: '',
        xmzrq: '',
        gzkssj: '',
        gzjssj: '',
        xmnr: '',
        ysbz: '',
        cjzfiles: '',
        checksData: [],
        name: '',
        itembh: '',
        status: '',
        fkje: '',
        ysdh: '',
        ystype: '',
        ystypestr: '',
      }
    },
    computed: {
      formDisabled(){
        if(this.formBpm===true){
          if(this.formData.disabled===false){
            return false
          }
          return true
        }
        return this.disabled
      },
      showFlowSubmitButton(){
        if(this.formBpm===true){
          if(this.formData.disabled===false){
            return true
          }
        }
        return false
      }
    },
    created () {
      //如果是流程中表单，则需要加载流程表单data
      this.showFlowData();
    },
    methods: {
      add () {
        this.edit({});
      },
      edit (record) {
          let that = this;
          that.form.resetFields();
          that.getChecks(record.ysdh);
          that.getPlYsMxList(record.xmbh);
          that.ystype = record.ystype;
        if(record.ystype===1){
          that.ystypestr = "验收方式：  阶段验收" ;
        }else{
          that.ystypestr = "验收方式：  完工验收" ;
        }
          // if(record.status == 5){
              that.ytjShow = true;
              that.dtjShow = false;
              that.ysshShow = true;
          // } else if(record.status > 2){
          //     that.ytjShow = true;
          //     that.dtjShow = false;
          //     that.ysshShow = false;
          // } else if(record.status > 1 ){
          //     that.cjzfiles = record.files;
          //     that.ytjShow = false;
          //     that.dtjShow = true;
          //     that.ysshShow = false;
          // } else {
          //     that.ytjShow = false;
          //     that.dtjShow = false;
          //     that.ysshShow = false;
          // }

          // that.dataSource = [];
          // let lpi = {
          //   abcd: '',
          //     itembh: '',
          //     status_dictText: '',
          //     name: '',
          //     identityid: '',
          //     phone: '',
          //     rwje: '',
          //     wctime: ''
          // };
          //
          // lpi.abcd = 123.45;
          // lpi.itembh = record.itembh;
          // lpi.status_dictText = record.status_dictText;
          // lpi.name = record.name;
          // lpi.identityid = record.identityid;
          // lpi.phone = record.phone;
          // lpi.rwje = record.rwje;
          // lpi.wctime = record.wctime;
          // that.dataSource.push(lpi);

          recordBean = record;
          that.name = record.name;
          that.itembh = record.itembh;
          that.status = record.status_dictText;
          that.fkje = record.fkje;
          that.ysdh = "验收单号：  " + record.ysdh;

          that.fbsj = record.fbsj;
          that.xmbh = record.xmbh;
          that.xmxybh = record.xmxybh;
          that.gzcsmc = record.gzcsmc;
          that.xmmc = record.xmmc;
          that.xmlx = record.xmlx;
          that.xyrs = record.xyrs;
          that.rwzje = record.rwzje;
          that.drjsje = record.drjsje;
          that.nlyq = record.nlyq_dictText;
          that.xlyq = record.xlyq_dictText;
          that.jyyq = record.jyyq_dictText;
          that.xmqrq = record.xmqrq;
          that.xmzrq = record.xmzrq;
          that.gzkssj = record.gzkssj;
          that.gzjssj = record.gzjssj;
          that.xmnr = record.xmnr;
          that.ysbz = record.ysbz;
      },
      getPlYsMxList(xmbh){
        let that = this;
        that.dataSource = [];
        let formData=new FormData();
        formData.append('xmbh', xmbh);
        formData.append('status', "5");
        postAction(that.url.getPlYsMxList, formData).then(res => {
          if (res.success) {
            that.dataSource = res.result;
          } else {
            that.$message.warning(res.message);
          }
        })
      },
      auditRecord (record){
          this.edit(record)
      },
      //渲染流程表单数据
      showFlowData(){
        if(this.formBpm === true){
          let params = {id:this.formData.dataId};
          getAction(this.url.queryById,params).then((res)=>{
            if(res.success){
              this.edit (res.result);
            }
          });
        }
      },
      submitForm () {
        const that = this;
        // 触发表单验证
        this.form.validateFields((err, values) => {
          if (!err) {
            let content = "";
            // if(recordBean.fkje == that.fkje){
            //   content = "当前应结算金额为" + that.fkje + "元";
            // } else if(recordBean.fkje){
            //   content = "调整前结算金额为"+recordBean.fkje+"元，调整后金额为"+that.fkje+"元，确认调整吗？"
            // }else {
            //   content = "调整后金额为"+that.fkje+"元，确认调整吗？"
            // }
            that.$confirm({
              title: "调整结算金额确认",
              content: content,
              onOk: function () {
                that.confirmLoading = true;
                that.spinning = true;
                let httpurl = '';
                let method = '';
                // if(!that.model.id){
                //   httpurl+=that.url.add;
                //   method = 'post';
                // }else{
                //   httpurl+=that.url.edit;
                //   method = 'put';
                // }
                httpurl+=that.url.addPl;
                method = 'post';
                values.rolename = "发包企业";
                values.ystype = recordBean.ystype ;
                values.lhygProjectItemChecksList = that.dataSource;
                // values.result = that.model.result;
                recordBean.fkje = that.fkje;
                let formData = Object.assign(that.model, values);
                // let formData = values;
                console.log("表单提交数据",formData)
                postAction(httpurl,formData).then((res)=>{
                  if(res.success){
                    if(formData.result == 1){
                      that.$message.success("验收完成");
                      setTimeout(function () {
                        that.visibleYzm = false;
                        that.spinning = false;
                        that.qsspinning = false;
                        that.confirmLoading = false;
                        that.fkjeInputShow = false;
                        that.fkjeShow = true;
                        that.smscode = '';
                        that.$message.success(res.message);
                        that.$emit('ok');
                      }, 1400)
                      //that.createPdf();
                    } else {
                      that.fkjeInputShow = false;
                      that.fkjeShow = true;
                      that.$message.success(res.message);
                      that.$emit('ok');
                    }
                  }else{
                    that.$message.warning(res.message);
                  }
                }).finally(() => {
                  that.confirmLoading = false;
                })
              }
            })
          }
        })
      },
      popupCallback(row){
        this.form.setFieldsValue(pick(row,'xmmc','xmlx','xmnr','xmzje','xbyq', 'xmrs_m', 'xmrs_f', 'xmrs','xmkssj','xmjssj',
            'gsmc', 'shtyxydm', 'sh', 'email', 'zcdz', 'bgdz', 'lxrxm', 'lxrsj', 'khh',  'kh' ))
      },
      changeJsje(){
        if(recordBean.status == 5){
          this.fkjeInput = '';
          this.fkjeInputShow = true;
          this.fkjeShow = false;
        }
      },
      changeFkje(){
        if(this.fkjeInput != null && this.fkjeInput != ""){
          this.fkje = this.fkjeInput;
        }
        this.fkjeInputShow = false;
        this.fkjeShow = true;
      },
      getChecks(ysdh){
        let that = this;
        getAction(that.url.getChecks, {"ysdh": ysdh} ).then(res => {
          if (res.success) {
            that.checksData = res.result;
          }
        }).catch((e) => {
          that.$message.warning(res.message);
        });
      },
      createPdf(){
        postAction(this.url.createPdf, recordBean).then((res)=>{
          if(res.success){
              this.visibleYzm = true;
          } else {
              this.$message.warning(res.message);
          }
        })
      },
      yzmClose(){
          this.smscode = '';
          this.visibleYzm = false
      },
      checkAndDownload(){
          const that = this;
          that.qsspinning = true;
          that.confirmLoading = true;
          getAction(that.url.checkAndDownload, {smscode:that.smscode, id:recordBean.id}).then((res) => {
              if (res.success){
                  that.$message.success("验收完成");
                  setTimeout(function () {
                      that.visibleYzm = false;
                      that.spinning = false;
                      that.qsspinning = false;
                      that.confirmLoading = false;
                      that.fkjeInputShow = false;
                      that.fkjeShow = true;
                      that.smscode = '';
                      that.$message.success(res.message);
                      that.$emit('ok');
                  }, 1400)
              }else{
                  that.spinning = false;
                  that.qsspinning = false;
                  that.confirmLoading = false;
                  that.$message.error(res.message)
              }
          });
      },
      handleCancel() {
          this.previewVisible = false;
      },
      async handlePreview(file) {
          if (!file.url && !file.preview) {
              file.preview = await getBase64(file.originFileObj);
          }
          this.previewImage = file.url || file.preview;
          this.previewVisible = true;
      },
    }
  }
</script>

